<template>
	<body-wrap>
		<view class="ulBox">
			<view class="item" v-for="(dt,index) in lists" :key="dt">
				<view class="imgBox">
					<image class="img" :src="dt" mode="aspectFill"></image>
					<view class="delBox">
						<image class="img" @click="delImg(index)" :src="imgUrlPrefix+'static/images/del.png'" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="item addBox" @click="updateImg">
				<view class="imgBox">
					<image class="img" :src="imgUrlPrefix+'static/images/jia.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<text class="btn" @click="submitApi">确定</text>
		</view>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {uploadImage,aidOrderUploadImg} from "@/api/index.js"
	import {getStorage,toast} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				id:'',
				details:'',
				lists:[]
			})
			
			onLoad(options=>{
				if(options){
					options.id && (state.id = options.id)
				}
				console.log("options:",options)
			})
			
			onMounted(()=>{
				state.details = JSON.parse(getStorage('aidOrderItem') || '{}')
				console.log("details:",state.details)
				if(state.details.verifyImage){
					state.lists = state.details.verifyImage.split(";")
				}else{
					state.lists = []
				}
			})
			
			const updateImg = async ()=>{
				const res = await uploadImage()
				if(res.code == 0){
					state.lists.push(res.data.url)
				}else{
					toast('上传失败')
				}
			}
			
			const submitApi = async ()=>{
				const verifyImage = state.lists.join(";")
				if(verifyImage == state.details.verifyImage){
					// 没有选择图片，直接返回
					uni.navigateBack()
					return
				}
				if(state.lists.length<1){
					return toast('请选择图片')
				}
				const res = await aidOrderUploadImg({
					id:parseInt(state.id),
					verifyImage
				})
				if(res.code == 0){
					uni.showModal({
						title: '提示',
						content: '图片上传成功！',
						showCancel:false,
						success: async function (res) {
							if (res.confirm) {
								uni.navigateBack()
							} 
						}
					});
				}else{
					toast(res.msg || '操作失败')
				}
			}
			
			const delImg = (index)=>{
				state.lists.splice(index,1)
			}
			
			return {
				...toRefs(state),
				updateImg,
				submitApi,
				delImg
			}
		}
	})
</script>

<style lang="scss" scoped>
	.ulBox{
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx;
		&::after{
			content: '';
			display: block;
			clear: both;
		}
		.item{
			box-sizing: border-box;
			float: left;
			width: 33.333%;
			height: 240rpx;
			overflow: hidden;
			padding: 10rpx;
			.imgBox{
				position: relative;
				z-index: 50;
				height: 100%;
				width: 100%;
				background: #eee;
				border-radius: 10rpx;
				overflow: hidden;
				.img{
					display: block;
					width: 100%;
					height: 100%;
				}
				.delBox{
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					z-index: 51;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 70rpx;
					background: rgba(0,0,0,0.5);
					.img{
						display: block;
						margin:0;
						width: 40rpx;
						height: auto;
					}
				}
			}
			&.addBox{
				.imgBox{
					display: flex;
					align-items: center;
					justify-content: center;
					.img{
						display: block;
						width: 100rpx;
						height: auto;
					}
				}
			}
		}
	}
	.btnBox{
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		z-index: 100;
		left: 0;
		bottom: 0;
		background: #fff;
		box-sizing: 0 0 0 10rpx #eee;
		padding: 20rpx 30rpx;
		.btn{
			display: block;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			background: #fba70e;
			font-size: 30rpx;
			color: #fff;
			margin: 0;
		}
	}
</style>
